<template>
  <el-main>
    <!-- 新增按钮 -->
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow">新增</el-button>
      <!-- 数据表格 -->
      <el-table
        style="margin-top: 10px"
        :height="tableHeight"
        :data="menuList"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }"
        :border="true"
        stripe
      >
        <el-table-column prop="label" label="菜单名称"></el-table-column>
        <el-table-column prop="type" label="菜单类型" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
            <el-tag type="success" v-else-if="scope.row.type == '1'" size="normal">
              菜单</el-tag>
            <el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal">
              按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="图标" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" >
            </i>
            <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="路由名称"></el-table-column>
        <el-table-column prop="path" label="路由地址"></el-table-column>
        <el-table-column prop="url" label="组件路径"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <!-- 新增或编辑弹框 -->
    <system-dialog
      :title="menuDialog.title"
      :width="menuDialog.width"
      :height="menuDialog.height"
      :visible="menuDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="menu"
          ref="menuForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="menu.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <el-radio :label="2">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="label" size="small" label="所属菜单">
            <combotree :parentNode="parentNode" @combotreeNodeSelected="combotreeNodeSelected"></combotree>
          </el-form-item>
          <el-form-item prop="label" size="small" label="菜单名称" style="margin-left: -15px">
            <el-input v-model="menu.label"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单图标">
            <my-icon @selecticon="setIcon" ref="child"/>
          </el-form-item>
          <el-form-item
            prop="name"
            v-if="menu.type == 1"
            size="small"
            label="路由名称"
          >
            <el-input v-model="menu.name"></el-input>
          </el-form-item>
          <el-form-item
            prop="path"
            v-if="menu.type != 2"
            size="small"
            label="路由地址"
          >
            <el-input v-model="menu.path"></el-input>
          </el-form-item>
          <el-form-item
            prop="url"
            v-if="menu.type == 1"
            size="small"
            label="组件路径"
          >
            <el-input v-model="menu.url"></el-input>
          </el-form-item>
          <el-form-item prop="code" size="small" label="权限字段">
            <el-input v-model="menu.code"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单序号">
            <el-input v-model="menu.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
  import menuApi from '@/api/menu';
  import SystemDialog from '@/components/System/SystemDialog';
  import combotree from "@/components/Form/menuCombotree";
  import MyIcon from "@/components/System/MyIcon";
  export default {
    name:'menuList',
    components:{
      SystemDialog,
      combotree,
      MyIcon
    },
    data(){
      return {
        //上级所属菜单，编辑时传给combotree子组件
        parentNode:{},
        menuList:[],
        tableHeight:0,
        //新增或编辑弹框属性
        menuDialog: {
          title: "",
          width: 630,
          height: 270,
          visible: false,
        },
        //菜单属性
        menu: {
          id: "",
          type: "",
          parentId: "",
          parentName: "",
          label: "",
          icon: "",
          name: "",
          path: "",
          url: "",
          code: "",
          orderNum: "",
        },
        rules: {
          type: [{ required: true, trigger: "change", message: "请选择菜单类型" }],
          parentName: [{ required: true, trigger: "change", message: "请选择所属菜单"
          }],
          label: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
          name: [{ required: true, trigger: "blur", message: "请输入路由名称" }],
          path: [{ required: true, trigger: "blur", message: "请输入路由路径" }],
          url: [{ required: true, trigger: "blur", message: "请输入组件路径" }],
          code: [{ required: true, trigger: "blur", message: "请输入权限字段" }],
        },
      }
    },
    created() {
      this.search();
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight-180;
      });
    },
    methods:{
      async search(){
        let res = await menuApi.getMenuList();
        if(res.code === 200){
          this.menuList = res.data;
        }
      },
      /**
       * 打开添加窗口
       */
      openAddWindow() {
        //清空传递给子组件combotree的值，达到关闭新增窗口后重开清除combtree数据的效果
        this.parentNode = {};
        this.$resetForm("menuForm", this.menu); //清空表单数据
        this.menuDialog.title = "新增菜单"; //设置窗口标题
        this.menuDialog.visible = true; //显示窗口
        //清空图标选择器，必须是this.$nextTick(),这样才能在重新调用组件时刷新数据，代码顺序要注意，必须写在弹窗打开后
        this.$nextTick(()=>{
          this.$refs.child.userChooseIcon = '';
        })
      },
      /**
       * 添加和修改菜单窗口关闭事件
       */
      onClose() {
        this.menuDialog.visible = false; //关闭窗口
      },
      /**
       * 添加和修改菜单窗口确认事件
       */
      onConfirm() {
      //表单验证
        this.$refs.menuForm.validate(async (valid) => {
          if (valid) {
            let res=null;
            if(this.menu.id===''){
              //新增
              res = await menuApi.addMenu(this.menu);
            }else{
              //修改
              res = await menuApi.updateMenu(this.menu);
            }
            if(res.code === 200){
              this.$message.success(res.msg);
              //刷新表格
              this.search();
              //关闭窗口
              this.menuDialog.visible=false;
            }else{
              this.$message.error(res.msg);
            }
          }
        });
      },
      handleEdit(row){
        this.menu = {...row};
        this.parentNode = {id:row.parentId,label:row.parentName}
        this.$nextTick(()=>{
          this.$refs.child.userChooseIcon = row.icon;
        });
        this.menuDialog.title = '编辑权限';
        this.menuDialog.visible = true;
      },
      /**
       * 选择所属菜单
       */
      combotreeNodeSelected(selectNode){
        this.menu.parentName = selectNode.departmentName;
        this.menu.parentId = selectNode.id;
      },
      setIcon(icon){
        this.menu.icon = icon;
      }
    }
  }
</script>
<style scoped>
  .el-select{
    width:92% !important
  }
</style>
